<template>
  <div class="zh-video-review-multi">
    <nav-header>
      <div class="zh-h5-nav">
        <!-- <div @click="changePanel">平台录制文件列表</div> -->
        <div class="active">设备录制文件列表</div>
        <!-- <div @click="changePanel('stream')">流媒体录制文件列表</div> -->
      </div>
    </nav-header>

    <div class="zh-table">
      <div class="zh-table-open clear">
        <div class="zh-open-left fl">
          <div class="open-width">
            <el-select v-model="recorder_id" filterable placeholder="请选择录播主机">
              <el-option v-for="item in recorderList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="open-width">
            <el-input v-model="keyword" placeholder="请输入视频名搜索" @keyup.enter.native="searchFunc"></el-input>
          </div>
          <el-button type="primary" @click="searchFunc">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
        <div class="zh-open-right fr">
          <el-button type="danger" @click="deleteMuiltVideo_confirm">批量删除</el-button>
        </div>
      </div>
      <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
        <el-table :data="listData" border @selection-change="tableSelectionChange" max-height="650" style="width: 100%">
          <el-table-column type="selection" width="50" align="center" fixed>
          </el-table-column>
          <el-table-column prop="name" label="视频名	" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="" label="主讲人" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.approveData.teacher_id" filterable placeholder="请选择主讲人">
                <el-option v-for="item in teacherData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="4" label="视频分类" align="center" width="220">
            <template slot-scope="scope">
              <el-select v-if="$store.state.platformInformation" v-model="scope.row.cate_id" filterable
                placeholder="请选择视频分类">
                <el-option v-for="item in cateData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-cascader v-else placeholder="请选择组织架构" :options="orgData" separator="->" :props="orgDataProps"
                v-model="scope.row.orgGroup">
              </el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="4" label="视频信息" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.approveData.is_nice" filterable placeholder="请选择">
                <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="start_time" label="开始录制时间" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="class_name" label="班级名" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="recorder_name" label="录播主机" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="upload_type" label="类型" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.upload_type == 0">普通视频</span>
              <span v-if="scope.row.upload_type == 1">AI视频</span>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="大小" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="5" label="操作" align="center" width="130" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click="playListBox(scope.row)" type="text">预览</el-button>
              <el-button @click="approveVideo_confirm(scope.row)" type="text">批准</el-button>
              <el-button @click="deleteVideo_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-pagination" v-show="total_number > 10">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total_number">
          </el-pagination>
          <div class="pagination-button">
            <el-button @click="getList" type="primary" icon="el-icon-refresh" circle title="刷新数据" size="mini">
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 播放列表 -->
    <el-dialog title="播放列表" class="play-list-dialog" :visible.sync="playListVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" width="600px">
      <el-table :data="playList" :show-header="false" style="width: 100%">
        <el-table-column prop="" label="" width="540px">
          <template slot-scope="scope">
            <div @click="showplayBox(scope.row)">{{ scope.row.name }}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="memoryVisible" :close-on-click-modal="false" :close-on-press-escape="false"
      width="400px">
      <div class="server-memory">
        <img src="./../../../../static/image/home/server.png" />
        <span>服务器内存容量不足20%，请尽快清理内存。可清理视频、录制文件及回收站</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="memoryVisible = false">我知道了</el-button>
      </div>
    </el-dialog>

    <transition name="el-fade-in-linear">
      <div class="masking" :class="{ activeLive: isActive }">
        <div class="maskingBox">
          <div class="masking_h">
            <span>视频预览</span>
            <i class="el-icon-close" @click="viewClose"></i>
          </div>
          <div class="masking_c">
            <!-- <videoAlertView  v-if="showVideoPlayer" :playParam.sync="playParam" >
						</videoAlertView> -->
            <nativeVideo v-if="showVideoPlayer" :playParam.sync="playParam">
            </nativeVideo>
            <!-- <template v-if="showVideoPlayer">
                            <video v-if="videoType==='mp4'||videoType==='mov'" class="review-video" style="width:100%; height:100%; object-fit:fill;" controls autoplay preload="auto" >
                                <source :src="playParam.play_url" />
                                您的浏览器不支持 HTML5 video 标签,建议下载最新版谷歌浏览器使用。
                            </video>
                            <div v-else class="rewview-tips">
                                <p>当前视频格式是：{{videoType}}，不支持预览;</p>
                                <p>提示：仅支持mp4和mov格式视频预览.</p>
                            </div>
                        </template> -->
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// import videoAlertView from '../../public/videoAlertView'
import nativeVideo from "../../public/nativeVideo";

export default {
  data() {
    return {
      recorder_id: undefined,
      memoryVisible: false, // 服务器内存提示
      recorderList: [],
      playListVisible: false,
      rowLen: 0,
      loading: {
        status: false,
        txt: "获取数据...",
      },
      orgData: [],
      orgParam: {
        data_type: "manage_tree",
        status: [1, 2],
        level_string: "<4",
      },
      orgDataProps: {
        value: "id",
        label: "name",
      },
      listData: [],
      listParam: {
        keyword: "",
        page_index: 1,
        page_size: 10,
      },
      keyword: "",
      selected: [],
      total_number: 0,
      teacherData: [],
      cateData: [],
      addForm: {},
      AddFormOrgGroup: [],
      teacherParam: {
        org_id: 0,
        role_id: 6,
        status: [1],
      },
      typeOption: [
        {
          value: 0,
          label: "公开课",
        },
        // {
        //   value: 1,
        //   label: '微课'
        // }
      ],
      isActive: true,
      showVideoPlayer: false,
      playParam: { play_url: "" },
      videoType: "", //视频后缀名
      playList: [],
    };
  },
  created() {
    this.getList();
    this.getOrgData();
    this.getTeacher();
    this.getCateData();
    this.getRecorderList();
    this.getMemory();
  },
  mounted() { },
  components: {
    nativeVideo,
  },
  methods: {
    /**
     * 获取服务器内存容量
     */
    getMemory() {
      let success = (res) => {
        let _name = +res.data[6].split("%")[0];

        if (_name >= 80) {
          this.memoryVisible = true;
        }
      };
      let fail = (res) => { };

      this.$ajax.get("api/system/system_info", {
        func: { success: success, fail: fail },
      });
    },
    getRecorderList() {
      let success = (res) => {
        this.recorderList = res.data;
      };
      let params = {};

      this.$ajax.get("api/recorder/recorder_list", {
        params,
        func: { success: success },
      });
    },
    searchFunc() {
      this.listParam.keyword = this.keyword;
      this.listParam.page_index = 1;
      this.getList();
    },
    reset() {
      this.keyword = "";
      this.recorder_id = undefined;
      this.listParam = {
        keyword: "",
        page_index: 1,
        page_size: 10,
      };
      this.getList();
    },
    viewClose() {
      this.playListVisible = true;
      this.showVideoPlayer = false;
      this.isActive = true;
    },
    videoView(url) {
      this.playParam.play_url = url;
      this.videoType = url.substring(url.length - 3).toLowerCase();
      this.showVideoPlayer = true;
      this.isActive = false;
    },
    approveVideo_confirm(obj) {
      console.log(obj, 123456)
      if (!obj.approveData.teacher_id || is_empty(obj.approveData.teacher_id)) {
        this.$message.warning("请选择主讲人");
        return false;
      }
      if (!this.$store.state.platformInformation) {
        if (obj.orgGroup.length < 3) {
          this.$message.warning("请选择正确的组织架构");
          return false;
        }
      } else {
        if (obj.cate_id.length < 1) {
          this.$message.warning("请选择视频分类");
          return false;
        }
      }
      if (parseInt(obj.approveData.is_nice) !== 0 && parseInt(obj.approveData.is_nice) !== 1) {
        this.$message.warning("请选择视频信息");
        return false;
      }
      console.log(obj.approveData, obj.cate_id)
      let yes = (data) => {
        if (!this.$store.state.platformInformation) {
          obj.approveData.study_section_id = obj.orgGroup[1];
          obj.approveData.grade_id = is_empty(obj.orgGroup[2]) ? 0 : obj.orgGroup[2];
        }
        this.approveVideo(obj.approveData, obj.cate_id);
      };
      let cancel = (data) => { };
      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定批准通过" + obj.name + " 吗？",
      });
    },
    approveVideo(param, cate_id) {
      let params = {
        id: param.id,
        cate_id: cate_id,
        teacher_id: param.teacher_id,
        is_nice: param.is_nice,
        study_section_id: param.study_section_id,
        grade_id: param.grade_id,
      }
      this.loading.txt = "正在审核...";
      this.loading.status = true;
      let success = (data) => {
        this.loading.status = false;
        this.$message.success(data.msg);
        this.getList();
      };
      let fail = (data) => {
        this.loading.status = false;
        this.$message.error(data.msg);
      };
      this.$ajax.post("api/video/recorded_0660", params, {
        func: { success: success, fail: fail },
      });
    },
    getTeacher() {
      let success = (data) => {
        this.teacherData = data.data;
      };
      if (this.$store.state.platformInformation) {
        this.teacherParam.role_id = 8
      }
      this.$ajax.get("api/user/user", {
        params: this.teacherParam,
        func: { success: success },
      });
    },
    getCateData() {
      let success = (data) => {
        this.cateData = data.data;
        this.cateData.unshift({ id: 0, name: '全部' })
      };
      this.$ajax.get("api/video/video_cate", {
        func: { success: success },
      });
    },
    getOrgData() {
      // 重写成功回调
      let success = (res) => {
        !is_empty(res.data) && res.data.forEach((item1) => {
          let data1 = item1.children;

          !is_empty(data1) &&
            data1.forEach((item2) => {
              let data2 = item2.children;

              !is_empty(data2) &&
                data2.forEach((item3) => {
                  item3.children = null;
                });
            });
        });

        this.orgData = res.data;
      };
      if (this.$store.state.checkLevel) {
        this.orgParam.direction = 'down'
        this.orgParam.data_type = 'manage_tree'
        this.orgParam.pid = 1
        this.$ajax.get("api/newlevel/platform_org", {
          params: this.orgParam,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/org", {
          params: this.orgParam,
          func: { success: success },
        });
      }

    },
    getType(val) {
      return this.cutType[parseInt(val)];
    },
    getMirco(val) {
      return this.isMirco[parseInt(val)];
    },
    getList() {
      this.loading.status = true;
      let success = (data) => {
        this.loading.status = false;
        this.listData = data.data.data;

        this.listData.map(item => {
          this.$set(item, 'cate_id', 0)
        })

        for (var i = this.listData.length - 1; i >= 0; i--) {
          let _temp = this.listData[i].approveData;
          this.listData[i].orgGroup = [1];

          _temp.study_section_id &&
            this.listData[i].orgGroup.push(_temp.study_section_id);
          _temp.grade_id && this.listData[i].orgGroup.push(_temp.grade_id);

          if (_temp.teacher_id == 0) {
            _temp.teacher_id = null;
          }
        }

        this.total_number = data.data.data_sum;
      };
      let fail = (data) => {
        this.loading.status = false;
        this.$message.error(data.msg);
      };
      this.listParam.recorder_id = this.recorder_id;

      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/video/recorded_0660", {
        params: this.listParam,
        func: { success: success, fail: fail },
      });
    },
    //选中
    tableSelectionChange(val) {
      this.selected = val;
    },
    handleSizeChange(val) {
      this.listParam.page_index = 1;
      this.listParam.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParam.page_index = val;
      this.getList();
    },
    deleteVideo(id) {
      let success = (data) => {
        this.$message.success(data.msg);

        if (this.listData.length - this.rowLen === 0) {
          if (this.listParam.page_index > 1) {
            this.listParam.page_index--;
          } else {
            this.listParam.page_index = 1;
          }
        }

        this.getList();
      };
      this.$ajax.delete("api/video/recorded_0660", {
        params: { id: id },
        func: { success: success },
      });
    },
    deleteVideo_confirm(obj) {
      let yes = (data) => {
        this.rowLen = 1;
        this.deleteVideo(obj.id);
      };
      let cancel = (data) => { };
      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定将 " + obj.name + " 删除吗？",
      });
    },
    deleteMuiltVideo_confirm() {
      if (this.selected.length === 0) {
        this.$message.warning("请选择要删除的项");
        return false;
      }
      let yes = (data) => {
        this.rowLen = this.selected.length;
        this.muilDeleteVideo();
      };
      let cancel = (data) => { };

      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定要删除选中的项吗？",
      });
    },
    muilDeleteVideo() {
      var ids = [];
      for (var i = this.selected.length - 1; i >= 0; i--) {
        ids.push(this.selected[i].id);
      }
      this.deleteVideo(ids);
    },
    changePanel(panel) {
      // if (panel === 'stream') {
      //     this.$router.push("/resources/video/video-review-stream")
      // } else {
      this.$router.push("/resources/video/video-review");
      // }
    },
    playListBox(obj) {
      this.playList = obj.play_list;
      this.playListVisible = true;
    },
    showplayBox(obj) {
      this.playListVisible = false;
      this.videoView(obj.play_url);
    },
  },
};
</script>
<style lang="scss">
.zh-video-review-multi {
  // .el-table__body-wrapper table tbody {
  // 	td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(9) {
  // 		padding: 0;
  // 	}
  // }

  .server-memory {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 25px 0 45px;

    >img {
      margin-bottom: 25px;
    }
  }

  .el-input--small .el-input__inner {
    height: auto !important;
  }
}

.play-list-dialog {
  .el-table__body tbody tr td .cell div:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .el-dialog__body {
    padding: 30px 30px 38px;
  }
}

.masking {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;

  .maskingBox {
    position: absolute;
    top: 20%;
    left: 50%;
    width: 800px;
    margin-left: -400px;
    background: #fff;
  }

  .masking_h {
    padding: 10px 15px;
    background: #348efc;
    text-align: center;
    text-align-last: justify;

    >span,
    >i {
      font-size: 16px;
      text-align-last: initial;
      display: inline-block;
      vertical-align: middle;
      color: #fff;
    }

    >i {
      cursor: pointer;
    }
  }

  .masking_c {
    padding: 10px;
    height: 445px !important;
  }

  .rewview-tips {
    text-align: center;
    padding: 50px 0 60px;
  }
}

.activeLive {
  opacity: 0;
  visibility: hidden;
}
</style>
